<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>  
    <!-- 
        action 表单提交数据的地址(一般是后端接口地址,接收数据)
        method 提交数据的方式 get/post

        以get方式提交数据时,会将参数数据队列(键值对:user=a123123&pwd=123123&phone=17386141517&email=wlc1272071495%40gmail.com)提交到action所指的url之后 用?分隔\

        get提交和post提交的区别?
            (1) get是向服务器获取/查询数据的一种请求，post是向服务器提交数据的一种请求。
            (2)  以get方式提交数据时,会将参数数据队列提交到action所指的url之后 用?分隔 => 在地址栏可见
                以post方式提交数据时, 利用http post机制,将参数数据队列存放在请求主体中(body),传递给后端 => 在地址栏不可见

            (3) get方式传递数据,在地址栏可见, 安全性比较低, post安全性较高
            (4) get提交数据时, 速度比较快, post效率较低
            (5) get提交数据时, 一般不能超过4k, post默认不受限制


     -->
    <form action="https://www.baidu.com" method="get">
        <div class="input-group">
            <lable>用户名:</lable>
            <input type="text" name="user">
        </div>
        <div class="input-group">
            <lable>密&emsp;码:</lable>
            <input type="text" name="pwd">
        </div>
        <div class="input-group">
            <lable>手机号:</lable>
            <input type="text" name="phone">
        </div>
        <div class="input-group">
            <lable>邮&emsp;箱:</lable>
            <input type="text" name="email">
        </div>
        <div class="input-group">
            <input type="submit" class="btn" value="注册">
        </div>
    </form>
</body>
<script>
    // AJAX
    // 是指一种创建交互式网页应用的网页开发技术。

    // - AJAX：Asynchronous Javascript And XML（异步JavaScript和XML）  (aynsc sync)
    // - 交互：这里的交互指客户端和服务器的数据是可以相互传递和使用的。
    // - XML：一种类似于HTML的标记语言，可以将数据结构化，XML已经被JSON淘汰了。
    // - 异步：异步指程序可以同时执行，同步指程序需要按照顺序执行。

    // 特点:    在不提交整个页面的情况下,实现页面的局部刷新;

    // ajax起源:
    // 以前做数据交互的时候，大家通常选择使用表单的方式提交数据，表单提交这种方式，默认的时候会由当前页面跳转到action页面，所以用户体验及其糟糕，所以需要想办法让当前页面，不跳转的同时把数据传递过去，把服务器(后端)响应的内容拿回来。

    // AJAX解决的问题：
    // 指不刷新当前页面，把某些数据传递给服务器，把对应的数据从服务器拿回客户端。



    // 学习目标: 
    // 学习通过ajax向后端发送请求,并接收后端返回的响应数据!!

    // (1) live server起的服务器只能做前端页面展示,没有后端和数据库 
    // a. 先学 -> 先用 -> 花时间
    // b. 用别人写好的(明天)
    // c. ajax也可以请求同服务器下文件(文本文件), 请求成功之后返回文本内容

    // 前提: 学习ajax 需要在服务器环境下  (vscode => live server , Hbuilder, webStorm)


</script>
</html>